<template>
    <div id="tab_content">
        <div class="el-con">
            <checkAdd></checkAdd>
        </div>
        <div>
            <tableData></tableData>
        </div>
        <div class="el-con">
            <page></page>
        </div>
    </div>
</template>
<script>
import tableData from "../../components/table.vue";
import checkAdd from "../../components/checkAdd.vue";
import page from "../../components/page.vue";
import Event from "@/utils/Event";
export default {
    components: { tableData, checkAdd, page },
    data() {
        return {
            roleSelcet: [],
            showTable: [],
        }
    },
    methods: {
        send() {
            Event.$emit('data',
                { role_xh: '序号', role_jsbh: '角色编号', role_jsmc: '角色名称', role_bz: '备注', role_cjsj: '创建时间', role_zt: '状态' })//表格渲染的内容
            Event.$emit('button',
                { del: false, edit: true, none: true, have: false, quit: false, state: true, })//表格里的点击按钮
            Event.$emit('seeShow',
                [{
                    name: '角色编码', type: 'input', value: 'role_jsbh'
                }, {
                    name: '角色名称', type: 'input', value: 'role_jsmc'
                }, {
                    name: '状态', type: 'select', value: 'role_zt', options: ['启用', '停用',]
                }])//头部搜索框
            Event.$emit('addShow',
                [{
                    name: '角色编码', type: 'input', value: 'role_jsbh',noNone:true
                }, {
                    name: '角色名称', type: 'input', value: 'role_jsmc',noNone:true
                }, {
                    name: '备注', type: 'textarea', value: 'role_bz',noNone:false
                },
                {
                    name: '状态', type: 'switch', value: 'role_zt', true: '启用', false: '停用'
                }])//新增
            Event.$emit('editShow',
                [{
                    name: '角色编码', type: 'input', value: 'role_jsbh'
                }, {
                    name: '角色名称', type: 'input', value: 'role_jsmc'
                }, {
                    name: '备注', type: 'textarea', value: 'role_bz'
                },
                {
                    name: '状态', type: 'switch', value: 'role_zt', true: '启用', false: '停用'
                }])//编辑

        },
        get() {//请求数据
            this.$axios({
                url: '/record/roleSel'
            }).then((res) => {
                res.data.data.forEach(i => {
                    i.role_zt == '启用' ? i.none = true : i.none = false
                });
                Event.$emit('table', res.data.data);
            })
        },
        edit() {//修改
            Event.$on('edit', v => {
                v.role_zt == true ? v.role_zt = '启用' : v.role_zt = '停用';
                let vData = [];
                for (const key in v) {
                    vData.push(key, v[key])
                }
                this.$axios({
                    url: '/record/roleEdit',
                    method: 'post',
                    data: {
                        data: vData,
                        jsbh: v.role_jsbh
                    }

                }).then(res => {
                    if (res.data.code == 200) {
                        console.log(res.data.msg);
                        this.get()
                    }
                })
            });
        },
        roleNone() {//停用启用
            Event.$on('none', v => {
                v.none == true ? v.role_zt = '启用' : v.role_zt = '停用';
                this.$axios({
                    url: '/record/roleChange',
                    method: 'post',
                    data: {
                        zt: v.role_zt,
                        jsbh: v.role_jsbh
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        console.log(res.data.msg);
                    }
                })
            })
        },
        add() {//新增
            Event.$on('addForm', v => {
                v.role_zt == true ? v.role_zt = '启用' : v.role_zt = '禁用'
                let date = new Date
                date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
                this.$axios({
                    url: '/record/roleAdd',
                    method: 'post',
                    data: {
                        jsbh: v.role_jsbh,
                        jsmc: v.role_jsmc,
                        bz: v.role_bz,
                        cjsj: date,
                        zt: v.role_zt
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        console.log(res.data.msg);
                        this.get()
                    }
                })
            });
        }
    },
    created() {
        this.get();
    },
    mounted() {
        this.send();
        this.edit();
        this.roleNone();
        this.add()
    },
}
</script>
<style scoped>
.el-con {
    margin: 40px 0 30px;
   
}
#tab_content{
    padding: 0 20px;
}
</style>